<template>
  <view>
    <view class="editaddress">
      <view class="content">
        <view class="row">
          <view class="nominal">收货人</view>
          <view class="input"
            ><input
              placeholder="请输入收货人姓名"
              v-model="addressData.name"
              type="text"
            />
          </view>
        </view>
        <view class="row">
          <view class="nominal">电话号码</view>
          <view class="input"
            ><input
              placeholder="请输入收货人电话号码"
              v-model="addressData.phone"
              type="number"
              maxlength="11"
          /></view>
        </view>
        <view class="row">
          <view class="nominal">所在地区</view>
          <view class="input selectcity" @tap="openPicker">
            <input
              placeholder="请选择省市区"
              disabled
              type="text"
              v-model="addressData.address"
            />
            <view><uv-icon size="15" name="arrow-right"></uv-icon></view>
          </view>
        </view>
        <view class="row">
          <view class="nominal">详细地址</view>
          <view class="input">
            <textarea
              style="font-size: 26upx"
              v-model="addressData.moreAddres"
              auto-height="true"
              placeholder="输入详细地址"
              v-if="show == false"
            ></textarea>
          </view>
        </view>
        <view v-if="false" class="row">
          <view class="nominal" style="color: 666; margin-top: 10upx"
            >设为默认地址</view
          >
          <view class="input switch">
            <switch
              :color="colors"
              style="transform: scale(0.7)"
              @change="switchChange"
              :checked="addressData.isdefult == 1"
            ></switch>
          </view>
        </view>
      </view>
      <view @click="saveData" class="save">
        <view class="btn" :style="'background:' + colors">保存地址</view>
      </view>

      <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
      <cc-selectCity
        :province="province"
        :city="city"
        :area="area"
        :show="show"
        @changeClick="changeClick"
        @sureSelectArea="onsetCity"
        @hideShow="onhideShow"
      ></cc-selectCity>
    </view>
  </view>
</template>

<script>
import { updateAddr } from "../https/api/adress";
export default {
  data() {
    return {
      editAdress: "",
      colors: "#FF5951",
      show: false,
      province: "北京市",
      city: "北京市",
      area: "东城区",
      addressData: {
        name: "",
        phone: "",
        address: "",
        moreAddres: "",
        isdefult: 0,
      },
    };
  },
  onShow() {
    this.editAdress = JSON.parse(uni.getStorageSync("adress")).address;
    let arr = this.editAdress.split("");
    if (this.editAdress.includes("北京")) {
      console.log(arr, arr.indexOf("市"));
      this.province = arr.splice(0, arr.indexOf("市") + +1).join("");
      this.city = this.province;
      this.area = arr.splice(0, arr.indexOf("区") + +1).join("");
      this.addressData.address = this.city + this.area;

      this.addressData.moreAddres = JSON.parse(
        uni.getStorageSync("adress")
      ).moreAddres;
    } else {
      this.province = arr.splice(0, arr.indexOf("省") + +1).join("");

      this.city = arr.splice(0, arr.indexOf("市") + +1).join("");

      this.area = arr.splice(0, arr.indexOf("区") + +1).join("");

      this.addressData.address = this.province + this.city + this.area;
      this.addressData.moreAddres = JSON.parse(
        uni.getStorageSync("adress")
      ).moreAddres;
    }
    this.addressData.phone = JSON.parse(uni.getStorageSync("adress")).phone;
    this.addressData.isdefult = JSON.parse(
      uni.getStorageSync("adress")
    ).isdefult;
    this.addressData.name = JSON.parse(uni.getStorageSync("adress")).name;
  },
  methods: {
    async saveData() {
      if (this.addressData.name == "") {
        uni.showToast({
          title: "请填写收货人姓名",
          icon: "none",
          duration: 2000,
        });
        return false;
      } else if (this.addressData.phone == "") {
        uni.showToast({
          title: "请填写收货人电话号码",
          icon: "none",
          duration: 2000,
        });
        return false;
      } else if (this.addressData.address == "") {
        uni.showToast({
          title: "请填写省市区",
          icon: "none",
          duration: 2000,
        });
        return false;
      } else if (this.addressData.moreAddres == "") {
        uni.showToast({
          title: "请填写详细地址",
          icon: "none",
          duration: 2000,
        });
        return false;
      }

      console.log(
        this.editAdress,
        this.addressData,
        JSON.parse(uni.getStorageSync("adress"))
      );
      let obj = {
        receiver: this.addressData.name,
        mobile: this.addressData.phone,
        addr: this.addressData.moreAddres,
        province: this.province,
        provinceId: 370000000000,
        city: this.city,
        cityId: 370100000000,
        areaId: 330108000000,
        area: this.area,
        userType: 0,
        addrId: JSON.parse(uni.getStorageSync("adress")).addrId,
      };
         await updateAddr(obj)
         uni.showToast({
            title: "修改成功",
            icon: "none",
            
         })
         uni.navigateTo({
          url: "/pages/newAdress",
        })
    },
    openPicker() {
      this.show = true;
    },

    changeClick(value, value2, value3) {
      console.log("地址选择器 = " + value + value2 + value3);

      this.province = value;
      this.city = value2;
      this.area = value3;
    },
    onhideShow() {
      this.show = false;
      console.log("执行了关闭地址选择器");
    },
    //选中省市区
    onsetCity(e) {
      let data = e.detail.target.dataset;
      let address = data.province + data.city + data.area;
      this.show = false;
      this.addressData.address = address;
    },
    //
    switchChange(e) {},
  },
};
</script>
<style lang="scss" scoped>
.save {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 120upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.save view {
  display: flex;
}

.save .btn {
  box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
  width: 70%;
  height: 80upx;
  border-radius: 80upx;
  background-color: #f23a3a;
  color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 26upx;
  margin-bottom: 60px;
}

.save .btn .icon {
  height: 80upx;
  color: #fff;
  font-size: 26upx;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40upx;
}

.content view {
  display: flex;
}

.content .row {
  width: 92%;
  margin: 0 4%;
  border-bottom: solid 1upx #eee;
}

.content .row .nominal {
  width: 30%;
  height: 80upx;
  font-size: 27upx;
  font-family: Droid Sans Fallback;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  align-items: center;
}

.content .row .input {
  width: 70%;
  padding: 20upx 0;
  align-items: center;
  font-size: 26upx;
}

.content .row .input input {
  font-size: 26upx;
  color: #333333;
}

.content .row .switch {
  justify-content: flex-end;
}

.content .row .input textarea {
  min-height: 40upx;
  line-height: 40upx;
}

.content .del_box {
  width: 100%;
  display: block;
  overflow: hidden;
  margin-right: 30upx;
}

.content .del {
  width: 240upx;
  height: 80upx;
  float: right;
  justify-content: center;
  align-items: center;
  font-size: 26upx;
  color: #f23a3a;
  margin: 0 auto;
  margin-top: 50upx;
  border-radius: 38upx;
  background-color: rgba(255, 0, 0, 0.05);
  border-bottom: solid 1upx #eee;
}

.selectcity input {
  width: 90%;
}

.selectcity image {
  width: 40upx;
  height: 40upx;
  float: right;
}
</style>
